<template>
    <div class="body-c">
      <van-nav-bar @click-left="onClickLeft" :title="$route.meta.title" left-text="返回" left-arrow>
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
      <div id="body-content" v-if=" state.showRouter">

        <router-view > </router-view>
        <van-tabbar sticky v-model="$route.meta.name" replace active-color="#ee0a24" inactive-color="#000" @change="onChange">
          <van-tabbar-item v-for="tab in tabbaritemArr" :name="tab.name" :to="tab.path" :key="tab.path" :icon="tab.icon">{{tab.title}}</van-tabbar-item>

<!--          <van-tabbar-item name="lifeCycle" to="/lifeCycle" icon="home-o">生命周期函数</van-tabbar-item>-->
<!--&lt;!&ndash;          <van-tabbar-item to="/ref" icon="search">ref</van-tabbar-item>&ndash;&gt;-->
<!--          <van-tabbar-item name="vuex" to="/vuex" icon="friends-o">vuex</van-tabbar-item>-->
<!--          <van-tabbar-item name="teleport" to="/Teleport" icon="friends-o">Teleport</van-tabbar-item>-->
<!--          <van-tabbar-item name="cart" to="/cart" icon="setting-o">购物车</van-tabbar-item>-->
        </van-tabbar>
      </div>
    </div>
</template>

<script>
import {getCurrentInstance, ref, watch,reactive} from 'vue';
// import {routes} from "./router/index";//获取所有路由
import { useRouter,onBeforeRouteUpdate } from 'vue-router'
export default {
  name: 'App',
  setup() {
    // console.log(routes)//获取所有路由
    const { ctx } = getCurrentInstance();
    let active = ref("lifeCycle");
    let tabbaritemArr = ref([
      {name:"lifeCycle",title:"生命周期函数",path:"/lifeCycle",icon:"home-o"},
      {name:"vuex",title:"vuex",path:"/vuex",icon:"friends-o"},
      {name:"teleport",title:"teleport",path:"/teleport",icon:"setting-o"},
      {name:"suspense",title:"异步组件",path:"/suspense",icon:"apps-o"},
    ]);
    const onChange = (index) =>  {
     console.log(index)
    };
    const state = reactive({
      showRouter: true,
    })
    // function reload() {
    //   state.showRouter = false
    //   ctx.$nextTick(() => {
    //     state.showRouter = true
    //   })
    // }
    // 通过watch来监听
    // let route = useRouter();
    // onBeforeRouteUpdate(to=>{
    //   console.log('to :>> ', to);
    // })
    // watch(()=>route.currentRoute.value.meta.name, (newValue, oldValue) => {
    //   active=newValue||"vuex";
    //   ctx.$router.push("/"+active)
    //   console.log(active,"active")
    // }, { immediate: true })
    const onClickLeft = () => {
      history.go(-1);
      // active=ctx.$route.meta.name ;
      // reload()
      console.log(ctx)
      // ctx.$router.push( ctx.$route.href)
    };

    return {
      onClickLeft,
      onChange,
      active,
      tabbaritemArr,
      state,
    };
  },
}
</script>

<style scoped>
* {
  padding: 0px;
  margin: 0px;
}
.body-c{
  height: calc(100% - 50px);
  width: 100%;
  overflow: auto;

}
#body-content {
  /*position: fixed;*/
  /*top: 46px;*/
  /*width: 100%;*/
  /*bottom: 0px;*/
  /*overflow: hidden;*/

}

.v-enter {
  opacity: 0;
  transform: translateX(100%);
}

.v-leave-to {
  opacity: 0;
  transform: translateX(-100%);
  position: absolute;
}

.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}
</style>